<template>
	<div>
		<el-date-picker
			v-model="dateVal"
			:size="size"
			style="width: 100%;"
			:append-to-body="appendToBody"
			:disabled="disabled"
			:clearable="clearable"
			:picker-options="disabledFutureTime ? disabledFutureTimeOptions : pickerOptions"
			:type="type"
			:value-format="vF(type)"
			:start-placeholder="startPlaceholder"
			:end-placeholder="endPlaceholder"
			:placeholder="placeholder"
			@change="onChange"
		/>
	</div>
</template>

<script>
    export default {
        name: 'JkDatePicker',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            appendToBody: {
                type: Boolean,
                default: true
            },
            clearable: {
                type: Boolean,
                default: true
            },
            value: {
                type: [String, Number, Array],
                default: ''
            },
            size: {
                type: String,
                default: 'small'
            },
            startPlaceholder: {
                type: String,
                default: '开始时间'
            },
            endPlaceholder: {
                type: String,
                default: '结束时间'
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            validateEvent: {
                type: Boolean,
                default: true
            },
            optionList: {
                type: Array,
                default() {
                    return [];
                }
            },
            pickerOptions: {
                type: Object,
                default() {
                    return {};
                }
            },
            type: {
                type: String,
                default: 'date' // 暂时只支持date和dateTime
            },
            // 禁用使用未来的时间
            disabledFutureTime: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                dateVal: '',
                disabledFutureTimeOptions: {
                    disabledDate(time) {
                        return time.getTime() > new Date().getTime();
                    }
                }
            };
        },
        watch: {
            value: {
                handler(newVal) {
                    this.dateVal = newVal;
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            vF(type) {
                if (type === 'date' || type === 'daterange') {
                    return 'yyyy-MM-dd';
                } else if (type === 'datetime') {
                    return 'yyyy-MM-dd HH:mm:ss';
                } else {
                    return 'yyyy-MM-dd HH:mm:ss';
                }
            },
            onClear() {
                this.$emit('clear', this.dateVal);
            },
            onChange() {
                this.$emit('change', this.dateVal);
                this.$emit('on-enter', this.dateVal);
            }
        }

    };
</script>
